/**  函数式更新
如果新的状态需要使用先前的状态计算出来
*/
import React, {useState} from 'react';

export default () => {
  const [state, setState] = useState({number: 0}/*←可以是对象也可以是数字*/);

  /** 定时器间隔时间内无论点击多少次 都只会加一次*/
  function lazy() {
    setTimeout(() => {
      setState({number: state.number + 1}) //此时的number是你点击时的number 而不是最新的number (也就是说在你setTimout触发之前, 这个值可能又变了, 但你拿到的仍然的是之前的值)
    }, 1500)
  }

  /** ↓点几次加几次*/
  function lazyFunction() {
    setTimeout(/*如果你setState的是一个函数,则会取最新的状态→*/() => {
      setState(state => ({number: state.number + 1}));
      setState(state => ({number: state.number + 1})); /*且 会向加完上面一行 再用最新的结果加下面一行*/

      //useReducer的 dispatch方法 有同样的效果 都能"逃离闭包"
    }, 1000)
  }

  //先点一下lazy, 然后快速点击几下 +, 你会发现过一会 等到lazy触发时, 数字又调回去了

  return (
    <div>
      <p>{state.number}</p>
      <button onClick={() => setState({number: state.number + 1})}>+</button>
      <button onClick={lazy}>lazy</button>
      <button onClick={lazyFunction}>lazyFunction</button>
    </div>
  )
};
